<template>
  <a-drawer
    :title="title"
    :maskClosable="true"
    :width="drawerWidth"
    placement="right"
    :closable="true"
    @close="handleCancel"
    :visible="visible"
    style="height: 100%; overflow: auto; padding-bottom: 53px"
  >
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :model="model" :rules="validatorRules">
        <a-form-model-item label="话术类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="signinType">
          <a-select placeholder="请选择话术类型" v-model="model.signinType" @change="handleChange" :disabled="isEdit">
            <a-select-option v-for="item in list" :key="item.dataId" :value="item.dataId">{{
              item.categoryName
            }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="话术内容" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="suggestContent">
          <a-textarea v-model="model.suggestContent" :rows="4" placeholder="请输入话术内容" />
          <div
            v-if="model.suggestContent != null && model.suggestContent.length > 0"
            :style="{ display: 'inline-block', marginLeft: '20rem' }"
          >
            已填写：{{ model.suggestContent.length }}
          </div>
        </a-form-model-item>
      </a-form-model>
    </a-spin>

    <div class="drawer-bootom-button" v-show="!disableSubmit">
      <a-popconfirm title="确定放弃编辑？" @confirm="handleCancel" okText="确定" cancelText="取消">
        <a-button style="margin-right: 0.8rem">取消</a-button>
      </a-popconfirm>
      <a-button @click="handleSubmit" type="primary" :loading="confirmLoading">提交</a-button>
    </div>
  </a-drawer>
</template>

<script>
import { mapGetters } from 'vuex'
import { PAGE_MENU_TYPE } from '@/store/mutation-types'
import { postAction } from '@/api/manage'

export default {
  name: 'suggestionModal',
  components: {},
  props: ['isEdit'],
  data() {
    return {
      drawerWidth: 700,
      disableSubmit: false,
      dateFormat: 'YYYY-MM-DD HH:mm:ss',
      model: {
        suggestContent: '',
        signinType: null
      },
      dataId: null,
      // doctorId: 10011051, // doctorId 通过当前登陆者的信息获取，当前id为暂时
      visible: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      uploadLoading: false,
      confirmLoading: false,
      list: [],
      validatorRules: {
        signinType: [{ required: true, message: '请选择话术类型!' }],
        suggestContent: [{ required: true, message: '请输入话术内容!' }]
      }
    }
  },
  created() {},
  computed: {
    title() {
      return this.isEdit ? '编辑话术模板' : '新增话术模板'
    }
  },
  methods: {
    ...mapGetters(['doctorId', 'orgCode']),
    getType() {
      postAction('/suggest/category/list', { orgCode: this.orgCode() }).then(res => {
        if (res.success) {
          this.list = res.result
        } else {
          console.log(res.message)
        }
      })
    },
    onDateChange(date, dateString) {
      this.model.recordTime = dateString
    },
    add(record) {
      this.edit(record)
    },
    async edit(record) {
      await this.getType()
      this.model = Object.assign({}, record)
      // this.model.signinType && (this.model.signinTypeText = +this.model.signinType)
      this.dataId = record.dataId
      this.visible = true
      console.log('this.model ', this.model)
      this.resetScreenSize()
    },

    // 根据屏幕变化,设置抽屉尺寸
    resetScreenSize() {
      let screenWidth = document.body.clientWidth
      if (screenWidth < 500) {
        this.drawerWidth = screenWidth
      } else {
        this.drawerWidth = 700
      }
    },
    //窗口最大化切换
    toggleScreen() {
      if (this.modaltoggleFlag) {
        this.modalWidth = window.innerWidth
      } else {
        this.modalWidth = 800
      }
      this.modaltoggleFlag = !this.modaltoggleFlag
    },
    handleSubmit() {
      const that = this
      // 触发表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          // that.confirmLoading = true
          if (!this.isEdit) {
            const params = {
              dataId: this.dataId,
              doctorId: this.doctorId(),
              orgCode: this.orgCode(),
              signinType: this.model.signinType,
              suggestContent: this.model.suggestContent
            }
            postAction('/201/02/2010215', params)
              .then(res => {
                if (res.success) {
                  this.$message.success('添加成功')
                  that.$emit('ok')
                  this.handleCancel()
                } else {
                  this.$message.warning(res.message)
                }
              })
              .finally(() => {
                this.confirmLoading = false
              })
          } else {
            this.handleEdit()
          }
        } else {
          return false
        }
      })
    },
    handleChange(value) {
      this.$forceUpdate()
    },
    handleEdit() {
      const params = {
        dataId: +this.dataId,
        signinContent: this.model.suggestContent
      }
      postAction('/201/02/2010220', params)
        .then(res => {
          if (res.success) {
            this.$message.success('添加成功')
            this.$emit('ok')
          } else {
            this.$message.warning(res.message)
          }
        })
        .finally(() => {
          this.confirmLoading = false
          this.handleCancel()
        })
    },
    handleCancel() {
      this.visible = false
      this.disableSubmit = false
      this.$refs.form.resetFields()
    }
  }
}
</script>

<style scoped>
.avatar-uploader > .ant-upload {
  width: 104px;
  height: 104px;
}
.ant-upload-select-picture-card i {
  font-size: 49px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}

.ant-table-tbody .ant-table-row td {
  padding-top: 10px;
  padding-bottom: 10px;
}

.drawer-bootom-button {
  position: absolute;
  bottom: -8px;
  width: 100%;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  left: 0;
  background: #fff;
  border-radius: 0 0 2px 2px;
}
</style>

